<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../back-common.jsp"%>
<%@ include file="/WEB-INF/pages/common/taglib.jsp"%>
<%@ include file="/WEB-INF/pages/common/back-dialog.jsp"%>
<script type='text/javascript' src="<ls:templateResource item='/resources/common/js/jquery.validate.js'/>" ></script>
<link rel="stylesheet" type="text/css" media="screen" href="${contextPath}/resources/common/css/errorform.css" ></script>
<script type='text/javascript' src="<ls:templateResource item='/resources/plugins/ztree/jquery.ztree.core-3.5.min.js'/>"></script>
<script type='text/javascript' src="<ls:templateResource item='/resources/plugins/ztree/jquery.ztree.excheck-3.5.js'/>"></script>
<link type="text/css" rel="stylesheet"  href="<ls:templateResource item='/resources/plugins/ztree/zTreeStyle.css'/>" >
<script src="<ls:templateResource item='/resources/plugins/My97DatePicker/WdatePicker.js'/>" type="text/javascript"></script>
<link href="<ls:templateResource item='/resources/plugins/select2-4.0/select2.css'/>" rel="stylesheet"/>
<script src="<ls:templateResource item='/resources/plugins/select2-4.0/select2.full.min.js'/>" type="text/javascript"></script>
<script src="<ls:templateResource item='/resources/plugins/select2-4.0/i18n/zh-CN.js'/>" type="text/javascript"></script>
<script src="<ls:templateResource item='/resources/plugins/select2-4.0/makeSelect2.js'/>" type="text/javascript"></script>
<style type="text/css">
    <!--
    .group-item {
        display: block;
        float: left;
        font-size: 14px;
        width: 200px;
    }

    .w-150px {
        width: 150px;
    }

    .text-right {
        text-align: right;
    }

    -->
</style>
<form:form action="${contextPath}/admin/adminUser/update" method="post" id="form1">
    <input id="id" name="id" value="${adminUser.id}" type="hidden">
    <table class="${tableclass}" style="width: 100%">
        <thead>
        <tr>
            <th><a href="<ls:url address='/admin/index'/>" target="_parent">首页</a> &raquo;权限管理 &raquo; <a
                    href="${contextPath}/admin/adminUser/query">管理员管理</a> &raquo; 修改管理资料
            </th>
        </tr>
        </thead>
    </table>

    <div align="center">
        <table border="0" align="center" class="${tableclass}" id="col1">
            <tr>
                <td style="min-width: 180px;width: 180px;">
                    <div align="right">登录名称: <font color="ff0000">*</font></div>
                </td>
                <td>${adminUser.name}</td>
            </tr>
            <tr>
                <td>
                    <div align="right">姓名: <font color="ff0000">*</font></div>
                </td>
                <td>
                    <input class="${inputclass}" type="text" name="realName" id="realName"
                           value="${adminUser.realName}"/>
                </td>
            </tr>
            <tr>
                <td>
                    <div align="right">状态: <font color="ff0000">*</font></div>
                </td>
                <td>
                    <select id="enabled" name="enabled" class="${selectclass}">
                        <ls:optionGroup type="select" required="true" cache="true" beanName="ENABLED" selectedValue="${adminUser.enabled}"/>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <div align="right">性别:</div>
                </td>
                <td>
                    <select id="sex" name="sex" class="${selectclass}">
                        <ls:optionGroup type="select" required="true" cache="true" beanName="STAFF_SEX" selectedValue="${adminUser.sex}"/>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <div align="right">职位:</div>
                </td>
                <td>
                    <select id="position" name="position" class="${selectclass}">
                        <ls:optionGroup type="select" required="true" cache="true"
                                        beanName="STAFF_POSITION" selectedValue="${adminUser.position}"/>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <div align="right">上级:</div>
                </td>
                <td>
                    <select name="leader" id="leader" style="width: 200px">
                        <c:if test="${not empty adminUser.leader}">
                            <option value="${adminUser.leader}">${leaderName}</option>
                        </c:if>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <div align="right">部门: <font color="ff0000">*</font></div>
                </td>
                <td>
                    <div>
                        <input class="${inputclass}" id="deptName" name="deptName" type="text" readonly
                               value="${deptName}" onclick="showMenu(); return false;"/>
                        <input id="deptId" name="deptId" type="hidden" value="${adminUser.deptId}"/>
                    </div>
                    <div id="menuContent" class="menuContent" style="display: none; position: absolute; ">
                        <ul id="deptMenu" class="ztree" style="margin-top: 0;  background: #fff; border: 2px solid #0E90D2;">
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div align="right">首次登陆是否需要修改密码</div>
                </td>
                <td>
                    <select id="changePass" name="changePass"  class="${selectclass}">
                        <ls:optionGroup type="select" required="false" cache="true"  beanName="YES_NO" selectedValue="${adminUser.changePass}" />
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <div align="right">是否需要填写周报</div>
                </td>
                <td>
                    <select id="needDailyLog" name="needDailyLog"  class="${selectclass}">
                        <ls:optionGroup type="select" required="false" cache="true"  beanName="YES_NO" selectedValue="${adminUser.needDailyLog}" />
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <div align="right">到期时间:</div>
                </td>
                <td>
                    <input onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly" name="activeTime"
                           id="activeTime" class="${inputclass}" type="text"
                           onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})"
                           value='<fmt:formatDate value="${adminUser.activeTime}" pattern="yyyy-MM-dd"/>'/>
                </td>
            </tr>
            <tr>
                <td>
                    <div align="right">手机号码:</div>
                </td>
                <td>
                    <input class="${inputclass}" type="text" name="mobile" id="mobile" value="${adminUser.mobile}"/>
                </td>
            </tr>

            <tr>
                <td>
                    <div align="right">身份证号:</div>
                </td>
                <td>
                    <input class="${inputclass}" type="text" name="idCardNum" id="idCardNum"
                           value="${adminUser.idCardNum}"/>
                </td>
            </tr>

            <tr>
                <td>
                    <div align="right">住址:</div>
                </td>
                <td>
                    <input class="${inputclass}" type="text" name="addr" id="addr" value="${adminUser.addr}"/>
                </td>
            </tr>

            <tr>
                <td>
                    <div align="right">入职时间:</div>
                </td>
                <td>
                    <input readonly="readonly" name="hireDate" id="hireDate" class="${inputclass}" type="text"
                           onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"  onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})" value='${adminUser.hireDate}'/>
                </td>
            </tr>

            <tr>
                <td>
                    <div align="right">注释:</div>
                </td>
                <td>
                    <input class="${inputclass}" type="text" name="note" id="note" value="${adminUser.note}"
                           style="width: 300px"/>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div align="center">
                        <input class="${btnclass}" type="submit" value="提交"/>
                        <input class="${btnclass}" type="reset" value="重置"/>
                        <input class="${btnclass}" type="button" value="返回"
                               onclick="window.location='<ls:url address="/admin/adminUser/query"/>'"/>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</form:form>
<script language="javascript">
    $.validator.setDefaults({});

    jQuery.validator.addMethod("stringCheck", function (value, element) {
        return value.isAlpha();
    }, '<fmt:message key="user.reg.username"/>');

    jQuery.validator.addMethod("checkName1", function (value, element) {
        return checkAdminName(value);
    }, '<fmt:message key="errors.user.exists"><fmt:param value=""/></fmt:message>');


    $(document).ready(function () {
        jQuery("#form1").validate({
            rules: {
                realName: "required",
                deptName:"required",
                password: {
                    required: true,
                    checkPassword:true
                },
                password2:{
                    equalTo: "#password"
                }
            },
            messages: {
                realName:{
                    required: "请输入真实名字"
                },
                deptName:{
                    required: "请输入部门"
                },
                password: {
                    required: "请输入密码"
                },
                password2:{
                    equalTo: "密码必须要一致"
                }
            }
        });
        // 构造菜单
        createTree();

        makeSelect2(contextPath + "/admin/adminUser/userList", "#leader", "上级", "value", "key");
    });


    // 检查成员是否已经存在
    function checkAdminName() {
        var result = true;
        var nameValue = jQuery("#name").val();
        if (nameValue != null && nameValue != '') {
            if (nameValue.length >= 3 && nameValue.isAlpha()) {
                //call ajax action
                $.ajax({
                    url: contextPath + "/admin/adminUser/isAdminUserExist",
                    data: {"userName": nameValue},
                    type: 'post',
                    async: false, //默认为true 异步
                    error: function (jqXHR, textStatus, errorThrown) {
                        //console.log(textStatus, errorThrown);
                    },
                    success: function (retData) {
                        if ('true' == retData) {
                            result = false;
                        }
                    }
                });
            }
        }
        return result;
    }

    /*** 检查是否由数字字母和下划线组成 ***/
    String.prototype.isAlpha = function () {
        return (this.replace(/\w/g, "").length == 0);
    }

    function showMenu(id) {
        var nameObj = $("#deptName");
        var nameOffset = nameObj.offset();
        $("#menuContent").css({
            left: nameOffset.left + "px",
            top: nameOffset.top + nameObj.outerHeight() + "px"
        }).slideDown("fast");
        $("body").bind("mousedown", blurMenu);
    }

    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", blurMenu);
    }

    function blurMenu(event) {
        var stillFocus = event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0;
        if (!stillFocus) {
            hideMenu();
        }
    }

    function updateDept(deptId, deptName) {
        $("#deptName").val(' ' + deptName);
        $("#deptId").val(' ' + deptId);
    }

    function createTree() {
        var setting = {};
        setting.view ={ selectedMulti:false };
        setting.edit = { enable :false };
        setting.callback = { onClick: onClick };
        setting.data = { simpleData:{ enable: true, pIdKey: "parentId"} };

        var request = {};
        request.url = '${contextPath}/admin/department/queryDeptInfo';
        request.type = 'post';
        request.dataType = 'json';
        request.ContentType = 'application/json; charset=utf-8';
        request.error = function (msg) {  layer.alert("树状菜单创建失败");};
        request.success = function (data) {
            $.fn.zTree.init($("#deptMenu"), setting, data );
            $.fn.zTree.getZTreeObj("deptMenu").expandAll(true);
            initDept();
        };

        $.ajax(request);
    }

    function initDept() {
        var tree = $.fn.zTree.getZTreeObj("deptMenu");
        $("input[id^='deptName']").each(function () {

            var dept = $(this).attr("name");
            if (dept == "") return;

            var node = tree.getNodeByParam("id", dept);
            if (node != null)
                $(this).attr("value", "  " + node.name);

        });
    }

    function onClick(event, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("deptMenu");
        var dept = zTree.getSelectedNodes()[0];

      //  layer.confirm("确定要更改部门信息吗？", function () {
            updateDept(dept.id, dept.name);
       // });

        hideMenu();
    }

    

</script>

